<template>
  <FModal header="配置字典" ref="refFModal" @ok="close" :body-height="450" width="800">
    <FPage>
      <template #header>
        <div style="padding: 5px">
          <el-button type="primary" round icon="add" @click="addNew">新建项</el-button>
        </div>
      </template>
      <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
                :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                v-loading="loading">
        <el-table-column type="selection" width="40"/>
        <el-table-column show-overflow-tooltip sortable prop="dictTitle" label="标题"/>
        <el-table-column show-overflow-tooltip sortable prop="dictValue" label="值"/>
        <el-table-column show-overflow-tooltip label="操作">
          <template #default="{row}">
            <el-button round icon="remove"
                       @click="() => remove(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </FPage>
  </FModal>

  <SysDictItemEditor @ok="() => search(true)" ref="refSysDictItemEditor"/>
</template>
<script setup>

import {ref, shallowRef} from 'vue';
import FModal from '@/components/FModal/index.vue';
import {deleteAction, getAction} from '@/request/BaseRequest';
import TableSearchUtils from '@/utils/TableSearchUtils';
import FPage from '@/components/layout/FPage.vue';
import SysDictItemEditor from '@/views/plat/app/SysDictItemEditor/index.vue';
import {ElMessageBox} from 'element-plus';

const searchParams = ref({});
const refSysDictItemEditor = shallowRef();
const refFModal = shallowRef();
const searchForm = {
  value: {
    validate(call) {
      call(true);
    },
  }
};
let dict = {};

function remove(row) {
  ElMessageBox.confirm('删除后不可恢复, 确定删除吗', {
    draggable: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    loading.value = true;
    deleteAction('/plat/platDictItem/remove',
      {id: row.id}).then(data => {
      loading.value = false;
      if (data.success) {
        search(true);
      }
    });
  }).catch(() => {
  });
}

function setData(_dict) {
  dict = _dict;
  search();
  open();
}

function close() {
  refFModal.value.close();
}

function addNew() {
  refSysDictItemEditor.value.addNew(dict.id);
}

function open() {
  refFModal.value.open();
}

function onRowClick(row) {
  refSysDictItemEditor.value.setData(row);
}

function onSelection() {

}

function doSearch() {
  loading.value = true;
  getAction('/plat/platDictItem/list',
    {dictId: dict.id, current: 1, size: 1000}).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: undefined,
    order: undefined,
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  setData
});

</script>
<script>
export default {
  name: 'SysDIctItemConfiguration'
};
</script>
<style>

</style>
